<template>
  <Card id="card-body">
    <Form inline :model="query_form" label-position="right" >
      <FormItem label="账号:" style="display: inline-flex">
        <Input v-model="query_form.account" clearable placeholder="查询订单号" style="width: 130px"/>
      </FormItem>
      <FormItem style="display: inline-flex">
        <Button type="info" @click="query_init">查询</Button>
        <Button type="success" @click="add_modal">新增</Button>
      </FormItem>
    </Form>
    <Table stripe border ref="table" :height="height - 235" :columns="result_columns" :data="result_data" :loading="result_loading"/>
    <Modal v-model="add.seen" title="新增网红账号" width="400" height="500" :styles="{top: '10px'}">
      <Form label-position="left">
        <FormItem label="账号:" required>
          <Input v-model="add.account" type="text" style="width: 200px; margin-left: 25px"/>
        </FormItem>
        <FormItem label="交易额度:" required>
          <InputNumber v-model="add.transaction" type="text" style="width: 190px; margin-left: 5px"/>
        </FormItem>
        <FormItem label="成交件数量:" required>
          <InputNumber v-model="add.amount" type="text" style="width: 180px; margin-left: 3px"/>
        </FormItem>
        <FormItem label="颜色:" required>
          <InputNumber v-model="add.colour" type="text" style="width: 200px; margin-left: 25px"/>
        </FormItem>
      </Form>
      <div slot="footer" style="height: 25px">
        <Button type="info" @click="btn_add">新增</Button>&nbsp;&nbsp;&nbsp;&nbsp;
        <Button type="warning" @click="btn_cancel">取消</Button>
      </div>
    </Modal>
  </Card>
</template>

<script>
    import { post, baseUrl } from '@/libs/axios-cfg'
    import { formatDate } from '@/libs/util'
    export default {
        name: "setting",
        data() {
            return {
              height: 400,
              query_form: {
                account: ''
              },
              result_data: [],
              result_columns: [
                {
                  title: 'ID',
                  key: 'id',
                  maxWidth: 80,
                  align: 'center'
                },
                {
                  title: '账号',
                  key: 'account',
                  minWidth: 200,
                  align: 'center'
                },
                {
                  title: '交易额',
                  key: 'transaction',
                  minWidth: 200,
                  align: 'center',
                  sortable: true
                },
                {
                  title: '交易件数',
                  key: 'amount',
                  minWidth: 200,
                  align: 'center',
                  sortable: true
                },
                {
                  title: '备注',
                  key: 'extra',
                  align: 'center',
                }
              ],
              result_loading: false,
              add: {
                seen: false,
                account: '',
                transaction: 0.0,
                amount: 0.0,
                colour: 10
              }
            } // return
        },
        methods: {
          async query_init () {
            try {
              let res = await post('/dashboard/list', {
                account: this.query_form.account,
              });
              console.log('query = ', res);
              this.result_data = res.data[0];
              this.total = res.data[0].length;
            } catch (error) {
              this.$throw(error)
            }
          },
          btn_cancel() {
            this.add.seen = false;
          },
          async btn_add() {
            try {
              let res = await post('/dashboard/add', {
                account: this.add.account,
                transaction: this.add.transaction,
                amount: this.add.amount,
                colour: this.add.colour,
              });
              console.log('btn_add = ', res);
              if (res.status === 1) {
                this.query_init();
                this.$Message.success("新账号添加成功!");
              }
            } catch (error) {
              this.$throw(error)
            }
            this.add.seen = false;
          },
          add_modal() {
            this.add.seen = true;
            this.add.colour = parseInt(this.getRandom(10, 100, 0));
          },
          getRandom(start, end, fixed=0) {
            let differ = end - start
            let random = Math.random()
            return (start + differ * random).toFixed(fixed)
          },
        },
        created() {
          this.query_init();
          this.height = document.body.clientHeight;
        }
    }
</script>

<style scoped>

</style>
